<template>
  <div>
    <el-button type="primary" @click="add">添加</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="content" label="内容">
        <template #default="scope">
          <!-- {{scope.row.content}} -->
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="200">

        <template #default="scope">
          <el-button type="primary" link @click="op_edit(scope.row)">修改</el-button>
          <el-button type="primary" link @click="open_detail(scope.row)">详情</el-button>
          <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="del(scope.row)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <!-- 添加弹框 -->
    <el-dialog v-model="dialogVisible" :title="first_title" width="60%">
      <el-form :model="form" style="padding: 0 20px;">
        <!-- <el-form-item label=""> -->
        <!-- <el-input v-model="form.content" :rows="5" type="textarea" placeholder="请输入内容" /> -->
        <!-- <lay-textarea placeholder="请输入描述" v-model="form.content">  </lay-textarea> -->
        <Toolbar style="margin-bottom: 10px;" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="'default'" />
        <Editor style="height: 200px; overflow-y: hidden;border: 1px solid #ccc;" v-model="form.content" :defaultConfig="editorConfig" :mode="'default'" @onCreated="handleCreated" />

        <!-- </el-form-item>  -->

      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="enter_add">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog v-model="dialogVisibleDetail" title="热点解读详情" width="80%">
      <el-button type="primary" @click="add_detail">添加</el-button>
      <el-table :data="detailList" style="width: 100%">
        <el-table-column prop="parentId" label="父级id" width="80" />
        <el-table-column prop="title" label="标题" width="200" />
        <el-table-column prop="content" label="内容">
          <template #default="scope">
            <div v-html="scope.row.content">

            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">

          <template #default="scope">
            <el-button type="primary" link @click="detail_edit(scope.row)">修改</el-button>
            <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="del_detail(scope.row)">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="innerVisible" width="60%" title="确认添加" append-to-body>
        <el-input v-model="titleDetail" type="text" placeholder="请输入标题" style="margin-bottom: 10px;" />
        <!-- <el-input v-model="detail_area" :rows="5" type="textarea" placeholder="请输入内容" /> -->
        <Toolbar style="margin-bottom: 10px;" :editor="editorRef_detail" :defaultConfig="toolbarConfig" :mode="'default'" />
        <Editor style="height: 200px; overflow-y: hidden;border: 1px solid #ccc;" v-model="detail_area" :defaultConfig="editorConfig" :mode="'default'" @onCreated="handleCreatedDetail" />

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="innerVisible = false">取消</el-button>
            <el-button type="primary" @click="enter_detail">
              确认添加
            </el-button>
          </span>
        </template>
      </el-dialog>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleDetail = false">取消</el-button>
          <el-button type="primary">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
 <script setup lang="ts">
import http from '../../../http'

import { useCounterStore } from '../../../current/index'
import { storeToRefs } from 'pinia' // cnpm i pinia --save  2.1.3
import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const store = useCounterStore()
const { userInfo } = storeToRefs(store) //  数据

onMounted(() => {
  get_list()
})
onUnmounted(() => {
  editorRef.value = null
  editorRef_detail.value = null
})
const editorRef = shallowRef()
const editorRef_detail = shallowRef()

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const handleCreatedDetail = (editor) => {
  editorRef_detail.value = editor
}
const toolbarConfig = {
  excludeKeys: [
    'group-image',
    'group-video',
    'blockquote',
    'bulletedList',
    'numberedList',
    'insertTable',
    'codeBlock',
    'fullScreen'
  ]
}
const editorConfig = { placeholder: '请输入内容...' }

const dialogVisible = ref(false)
const form = ref({
  content: '',
  show: 1
})
const first_title = ref('')

const add = () => {
  form.value.content = ''
  dialogVisible.value = true
  first_title.value = '添加热点解读'
  //   `INSERT INTO webindex (label,num,unit,more) VALUES('哈哈哈哈哈哈哈哈','100','家','2')`
}
const enter_add = async () => {
  if (form.value.content == '') {
    ElMessage.error('内容不能为空')
    return false
  }

  if (first_title.value == '添加热点解读') {
    const res = await adminsql(
      `INSERT INTO webhot (content) VALUES('${form.value.content}')`,
      'website'
    )

    if (res) {
      ElMessage.success(res)
    }

    console.log(res)
    dialogVisible.value = false
    await get_list()
  } else if (first_title.value == '修改热点解读') {
    const res = await adminsql(
      `update webhot set content = '${form.value.content}' where id = ${first_id.value}`,
      'website'
    )

    if (res) {
      ElMessage.success(res)
    }

    console.log(res)
    dialogVisible.value = false
    await get_list()
  }
}
const first_id = ref('')
// 第一层修改
const op_edit = (row) => {
  dialogVisible.value = true
  form.value.content = row.content
  first_title.value = '修改热点解读'
  first_id.value = row.id
}

const del = async (row) => {
  const res = await adminsql(`DELETE FROM webhot WHERE id = ${row.id}`, 'website')
  console.log(res)
  if (res) {
    ElMessage.success(res)
  }
  await get_list()
}

// 详情
const detailId = ref('')
const dialogVisibleDetail = ref(false)
const open_detail = async (row) => {
  detailId.value = row.id
  dialogVisibleDetail.value = true
  await get_detail_list(row.id)
}
const add_detail = () => {
  innerVisible.value = true
  detail_area.value = ''
  titleDetail.value = ''
  is_add_edit.value = 'add'
}
const detail_area = ref('')
const titleDetail = ref('')
const secondId = ref('')
const enter_detail = async () => {
  console.log(detailId.value)
  console.log(detail_area.value)
  if (detail_area.value == '' || titleDetail.value == '') {
    ElMessage.error('内容不能为空')
    return false
  }
  if (is_add_edit.value == 'add') {
    // `INSERT INTO webindex (label,num,unit,more) VALUES('哈哈哈哈哈哈哈哈','100','家','2')
    const res = await adminsql(
      `INSERT INTO webhotdetail (parentId,content,title) VALUES('${detailId.value}','${detail_area.value}','${titleDetail.value}')`,
      'website'
    )
    if (res) {
      ElMessage.success(res)
    }

    console.log(res)
    innerVisible.value = false
    await get_detail_list(detailId.value)
  } else if (is_add_edit.value == 'edit') {
    const res = await adminsql(
      `update webhotdetail set content = '${detail_area.value}', title = '${titleDetail.value}' where id = '${secondId.value}'`,
      'website'
    )
    if (res) {
      ElMessage.success(res)
    }

    console.log(res)
    innerVisible.value = false
    await get_detail_list(detailId.value)
  }
}
const innerVisible = ref(false)
const is_add_edit = ref('')
// 详情修改
const detail_edit = (row) => {
  innerVisible.value = true
  detail_area.value = row.content
  titleDetail.value = row.title
  is_add_edit.value = 'edit'
  secondId.value = row.id
}

const del_detail = async (row) => {
  const res = await adminsql(`DELETE FROM webhotdetail WHERE id = ${row.id}`, 'website')
  console.log(res)
  if (res) {
    ElMessage.success(res)
  }
  await get_detail_list(row.parentId)
}

const detailList = ref([])
const get_detail_list = async (id) => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: `select * from webhotdetail where parentId = ${id}`,
      dbName: 'website'
    }
  })
  console.log(res)

  if (res.packageContent.packageStatus == 0 && res.packageContent.packageMsg != '成功') {
    detailList.value = JSON.parse(res.packageContent.packageMsg)
  } else {
    detailList.value = []
  }
}

const list = ref([])
const get_list = async () => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: `select * from webhot`,
      dbName: 'website'
    }
  })
  console.log(res)

  if (res.packageContent.packageStatus == 0) {
    list.value = JSON.parse(res.packageContent.packageMsg)
  }
}

const adminsql = async (sql, dbName) => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: sql,
      dbName: dbName
    }
  })
  console.log(res)

  let result = null
  if (res.packageContent.packageStatus == 0) {
    result = res.packageContent.packageMsg
  }
  

  return result
}

defineExpose({
  get_list
})
</script>

<style scoped>
</style>


<!-- <style src="@wangeditor/editor/dist/css/style.css" >
 
</style> -->

  